<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
})
//展示数据
const optionData = []
//扇形图颜色数据
const colorList = [
  { color1: 'rgba(76,167,163,0.9)', color2: 'rgba(90,255,223,1)' },
  { color1: 'rgba(65,149,99,0.9)', color2: 'rgba(115,255,145,1)' },
  { color1: 'rgba(98,167,131,0.9)', color2: 'rgba(153,255,179,1)' },
  { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
  { color1: 'rgba(190,164,75,0.9)', color2: 'rgba(255,207,74,1)' },
  { color1: 'rgba(165,123,98,0.9)', color2: 'rgba(254,178,128,1)' },
  { color1: 'rgba(105,123,186,0.9)', color2: 'rgba(151,176,255,1)' },
  { color1: 'rgba(106,102,173,0.9)', color2: 'rgba(164,151,255,1)' },
  { color1: 'rgba(106,76,178,0.9)', color2: 'rgba(159,110,254,1)' },
  { color1: 'rgba(134,109,188,0.9)', color2: 'rgba(180,143,241,1)' },
  { color1: 'rgba(54,122,194,0.9)', color2: 'rgba(76,174,254,1)' },
  { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
  { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
]
//请求的数据
const resultData = [
  {
    name: '1月',
    value: 95,
  },
  {
    name: '2月',
    value: 100,
  },
  {
    name: '3月',
    value: 98,
  },
  {
    name: '4月',
    value: 90,
  },
  {
    name: '5月',
    value: 100,
  },
  {
    name: '6月',
    value: 97,
  },
  {
    name: '7月',
    value: 100,
  },
  {
    name: '8月',
    value: 100,
  },
  {
    name: '9月',
    value: 100,
  },
  {
    name: '10月',
    value: 100,
  },
  {
    name: '11月',
    value: 100,
  },
  {
    name: '12月',
    value: 80,
  },
  {
    name: '其他',
    value: 80,
  },
]
let sum = 0
resultData.forEach((item) => {
  sum += item.value
})
resultData.forEach((item) => {
  optionData.push({ value: item.value, name: item.name })
  optionData.push({
    name: '',
    value: sum / 100,
    itemStyle: { color: 'transparent' },
  })
})
const option = {
  //   backgroundColor: '#001829',
  legend: [
    {
      orient: 'vertical',
      right: '32%',
      top: '0%',
      itemGap: 30,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      data: ['其他'],
    },
    {
      orient: 'vertical',
      right: '18%',
      top: '0%',
      itemGap: 30,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    },
    {
      orient: 'vertical',
      right: '2%',
      top: '0%',
      itemGap: 30,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      data: ['7月', '8月', '9月', '10月', '11月', '12月'],
    },
  ],
  tooltip: {
    trigger: 'item',
    formatter(params) {
      let res = ''
      const { marker, name, value } = params
      if (name !== '') {
        res += `${marker}${name}:${value}%`
      }
      return res
    },
  },
  series: [
    {
      type: 'pie',
      roseType: 'radius',
      radius: ['10%', '50%'],
      center: ['37%', '50%'],
      label: {
        // position: 'inside',
        formatter(item) {
          // console.log('@item', item)
          if (item.name === '') {
            return ''
          }
          //   return `${item.value}%`
          return item.name + '(' + item.value + '%)'
        },
        textStyle: {
          fontSize: 12,
          color: '#ffffff',
        },
      },
      labelLine: {
        show: true,
      },
      itemStyle: {
        normal: {
          color(params) {
            return colorList[parseInt(params.dataIndex / 2)].color1
          },
        },
      },
      z: 3,
      data: optionData,
    },
    // {
    //   type: 'pie',
    //   roseType: 'radius',
    //   radius: ['20%', '62%'],
    //   center: ['30%', '50%'],
    //   label: {
    //     show: false,
    //   },
    //   labelLine: {
    //     show: false,
    //   },
    //   itemStyle: {
    //     normal: {
    //       color(params) {
    //         return colorList[parseInt(params.dataIndex / 2)].color2
    //       },
    //     },
    //   },
    //   z: 2,
    //   data: optionData,
    // },
  ],
}

const chart = ref()
let timer1 = null
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
